<template>
  <div class="slide_container">
    <div class="slide_wrapper">
      <div v-for="(item,index) in goods" :key="index" class="lists">
        <figure>
          <!-- pic商品图片 -->
          <img :src="item.pic" alt />
          <!-- 商品title -->
          <p v-html="item.title"></p>
          <!-- 描述descript -->
          <p>{{item.descript}}</p>
        </figure>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    goods: Array
  }
};
</script>

<style scoped>
.slide_container {
  width: 100%;
  overflow-x: scroll;
}
.slide_wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.lists{
    margin: 0.2rem;
}
.lists figure {
  width: 5rem;
}

.lists figure img {
  width: 100%;
  height: 3rem;
  border-radius: 5px 5px 5px 5px;
}

.lists figure p {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  color: #646566;
}
</style>